<template>
  <div class="center-top">
    <div class="item-one">
      <div>
        今年累计销售额
        <p>{{ totalSales }}</p>
      </div>
      <div>
        本月累计销售额
        <p>{{ monthSales }}</p>
      </div>
      <div>
        今日累计销售额
        <p>{{ todaySales }}</p>
      </div>
    </div>
    <div class="item-two">
      <div>
        本年积累碳排放
        <p>{{ totalCarbonEmission }}</p>
      </div>
      <div>
        本月积累碳排放
        <p>{{ monthCarbonEmission }}</p>
      </div>
      <div>
        今日积累碳排放
        <p>{{ todayCarbonEmission }}</p>
      </div>
    </div>
    <div class="item-three">
        碳排放排行榜
        <dv-scroll-board :config="config" style="width:680px;height:400px;margin-left:5px;margin-top:10px;border-radius:10px;" />
    </div>
  </div>
</template>

<script>
import { currentGET } from "@/api/modules/index";
export default {
  data() {
    return {
      totalSales: {},
      monthSales: {},
      todaySales: {},
      totalCarbonEmission: {},
      monthCarbonEmission: {},
      todayCarbonEmission: {},
      listData: [],
      config: {}
    };
  },
  created() {},
  mounted() {
    // 销售总览
    currentGET("big12").then(res => {
      this.totalSales = res.data.todayTOtal;
      this.monthSales = res.data.monthTotal;
      this.todaySales = res.data.todayTotal;
    });
    // 本年碳排
    currentGET("big10").then(res => {
      this.totalCarbonEmission = res.rows[0].totalCarbonEmission;
    });
    // 本月碳排放
    currentGET("big9").then(res => {
      this.monthCarbonEmission = res.rows[0].totalCarbonEmission;
    });
    // 今日碳排放
    currentGET("big8").then(res => {
      this.todayCarbonEmission = res.rows[0].totalCarbonEmission;
    });
    // 碳排放排行榜
    currentGET("big11").then(res => {
      this.config = {
        header: ["设备", "生产数量", "碳排放"],
        data: [],
        rowNum: 7, //表格行数
        headerHeight: 35,
        headerBGC: "#0f1325", //表头
        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行
        index: true,
        columnWidth: [150],
        align: ["center"]
      };
      let list = res.rows;
      list.forEach(eq => {
        this.config.data.push([
          eq.equipmentName,
          eq.productQuantity,
          eq.totalCarbonEmission.toFixed(2)
        ]);
      });
    });
  },
  beforeDestroy() {},
  methods: {}
};
</script>
<style lang='scss' scoped>
.item-one {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  height: 100px;
  font-size: large;
}
.item-two {
  display: flex;
  justify-content: space-around;
  height: 100px;
  font-size: large;
}
p {
  font-size: 40px;
  color: #05f6ca;
  margin-top: 10px;
}
.item-three {
  width: 200px;
  height: 300px;
  font-size: large;
}
.title{
  width: 200px;
  height: 50px;
}
</style>